<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<script src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <link rel="stylesheet" href="${ctx}/zenithsun/plugins/Jcrop/css/jquery.Jcrop.css" type="text/css" />
    <script type="text/javascript" src="${ctx}/zenithsun/plugins/Jcrop/js/jquery.Jcrop.js"></script>
    <style type="text/css">
       .crop_preview{position:absolute; left:650px; top:0; width:200px; height:200px; overflow:hidden;}
       .coverContainer{width: 850px;height:410px; overflow: hidden;margin:40px;overflow: hidden;}
    </style>
	<script type="text/javascript">
		$(document).ready(function(){
			//记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
			$("#coverPath").Jcrop({
				aspectRatio:1,
				onChange:showCoords,
				onSelect:showCoords, 
		});
		//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
		function showCoords(obj){
			$("#x").val(obj.x);
			$("#y").val(obj.y);
			$("#w").val(obj.w);
			$("#h").val(obj.h);
			if(parseInt(obj.w) > 0){
				//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
				var rx = $("#preview_box").width() / obj.w; 
				var ry = $("#preview_box").height() / obj.h;
				//通过比例值控制图片的样式与显示
					$("#crop_preview").css({
						//预览图片宽度为计算比例值与原图片宽度的乘积
						width:Math.round(rx * $("#coverPath").width()) + "px",
						//预览图片高度为计算比例值与原图片高度的乘积
						height:Math.round(rx * $("#coverPath").height()) + "px",
						marginLeft:"-" + Math.round(rx * obj.x) + "px",
						marginTop:"-" + Math.round(ry * obj.y) + "px"
					});
				}
			}
			$("#crop_submit").click(function(){
				if(parseInt($("#x").val())){
					$("#crop_form").submit();
				}else{
					alert("要先在图片上划一个选区再单击确认剪裁的按钮哦！");
				}
			});
		});
	</script>
</head>
<body>
	<div class="coverContainer">
		<img id="coverPath" src="${ctx}${newsinfo.coverPath}" alt="封面图片" style="style="height:400px;width:650px;""> 
		<span id="preview_box" class="crop_preview">
			<img id="crop_preview" src="${ctx}${newsinfo.coverPath}" width="100%" />
		</span>
	</div>
	<div>
		<form action="servlet/JcropImg" method="post" id="crop_form">
			<input type="hidden" id="x" name="x" /> 
			<input type="hidden" id="y" name="y" /> 
			<input type="hidden" id="w" name="w" /> 
			<input type="hidden" id="h" name="h" />
			<P>
				<input type="button" value="确认剪裁" id="crop_submit" width="100px" height="100px" />
			</P>
		</form>
	</div>
</body>
</html>